<template>
	<div class="body">
	<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
		<!--p>刷新次数: {{ count }}</p-->
		<div class="main">
			<h3><i></i><span>您获得以下权益</span></h3>
      <div v-if="nullNum" class="bg-nummNum">
      </div>
      <!-- <img v-if="!nullNum" style="max-width:90%;display:block;margin:0 auto;" src="../../assets/img/null_bg.jpg" /> -->
      <van-list v-if="!nullNum" v-model="loading" :finished="finished" @load="onLoad" >
        <van-panel v-for="(item, index) in orderdetail" :key="index" title="盛大汽车礼品卡" :status="item.status === 1?'':'已过期'">
          <div style="padding: 10px 15px;">
            <ul>
              <li><label>权益总量</label><span class="blue">{{item.interests}}</span></li>
              <li><label>权益发放时间</label><span>{{item.createTime}}</span></li>
              <li><label>权益失效时间</label><span>{{item.expireTime}}</span></li>
              <li><label>兑换状态</label>
                <span v-if="item.exchangeStatus == 1" class="blue">已兑换</span>
                <span v-if="item.exchangeStatus == 0" class="blue">未兑换</span>
              </li>
            </ul>
          </div>
          <div slot="footer">
            <van-button v-if="item.status" size="small" @click="RedeemNow(item.id,item.interests)">立即兑换</van-button>
            <p v-if="!item.status" size="small" style="color:#ccc;text-align:center;">立即兑换</p>
          </div>
			  </van-panel>
      </van-list>

		</div>
	</van-pull-refresh>
		<van-actionsheet v-model="showView" title="请选择兑换方式">
			<van-radio-group v-model="radio">
				<van-cell-group>
					<van-cell title="油卡充值卡" clickable @click="radio = '0'">
						<van-radio name="0" />
					</van-cell>
					<van-cell title="微信提现" clickable @click="radio = '1'">
						<van-radio name="1" />
					</van-cell>
				</van-cell-group>
			</van-radio-group>
			<van-cell-group>
				<!-- <van-cell v-if="radio === '1'" title="实际到账：" value="" label="油卡充值卡等额发放" /> -->
				<div v-if="radio === '0'" class="wx">
					<span>实际到账：</span>
					<p>油卡充值卡等额发放</p>
				</div>
				<div v-if="radio === '1'" class="wx">
					<span>实际到账：</span>
					<p>根据手续费，扣费规则，微信提现实际到账金额为：{{weChatCash}}</p>
				</div>
				<div v-if="radio === '1'" class="wx blue">
					<span>扣费规则：</span>
					<p>手续费包含{{cashDiscount}}折油卡折扣费</p>
				</div>
			</van-cell-group>
			<button @click="exchangeBt()" class="exchangeBt">确认兑换</button>
		</van-actionsheet>
	</div>
</template>
<script>
import {
  getList,
  exchange,
  getWeChatCash,
  getWeTakecash,
  getPay
} from "../../api/rightsInterests.js";
import { RadioGroup, Radio } from "vant";
import { error } from "util";
import originJSONP from "jsonp";
export default {
  data() {
    return {
      showView: false,
      InFo: true,
      choiceBt: true,
      weChatCash: "", //微信提现返回金额
      cashDiscount: "", //微信提现折扣
      nullNum: true,
      listParams: {
        pageNum: 1,
        pageSize: 10
      },
      orderdetail: [],
      radio: "0",
      orderId: {
        id: ""
      },
      oliCardParams: {
        mon: "",
        whiteId: ""
      },
      count: 0,
      isLoading: false,
      id: "",
      // 上拉加载
      loading: false,
      finished: false,
      total:0
    };
  },
  created() {
    this.searchList();
  },
  methods: {
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    },
    GetQueryString(name) {
      const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      const r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },

    searchList() {
      this.choiceBt = true;
      this.orderdetail = "";
      getList(this.listParams).then(res => {
        if (res.status === 200) {
          if (res.data.data.length > 0) {
            this.nullNum = false;
            this.orderdetail = res.data.data;
            // 第一页数据小于10条后。不在触发上拉加载
            this.total = res.data.total;
          } else {
            this.nullNum = true;
          }
        } else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        this.$dialog.alert({
          message: err.message
        });
      });
    },
    RedeemNow(id, interests) {
      this.oliCardParams.mon = interests;
      this.oliCardParams.whiteId = id;
      this.showView = true;
      this.orderId.id = id;
      getWeChatCash(this.orderId).then(res => {
        // 获取微信提现到账  金额
        if (res.status === 200) {
          this.weChatCash = res.data.weChatCash;
          this.cashDiscount = res.data.cashDiscount;
        }
      });
    },
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.showView = false;
      Toast(item.name);
    },
    exchangeBt() {
      const paramsId = this.oliCardParams.whiteId;
      const sessionParams = sessionStorage.getItem('token');
      const test = {openId:this.oliCardParams.whiteId, session: sessionParams};
      const test1 = JSON.stringify(test);
      if (this.radio === "0") {
        //油卡提现
        this.showView = false;
        exchange(this.oliCardParams)
          .then(res => {
            if (res.status === 200) {
              this.$dialog.confirm({
                title: '查看详情',
                message: res.message
              }).then(() => {
                this.$router.push({
                  path: `/index/details`, query: {id: this.oliCardParams.whiteId, exchangeType: this.radio}
                })
              });
            } else {
              this.$dialog.alert({
                message: res.message
              }).then(() => {
                this.orderdetail = [];
                this.listParams.pageNum = 1;
                this.listParams.pageSize = 10;
                this.searchList();
              });
            }
          })
          .catch(error => {
            this.$dialog.alert({
                message: error.message
              })
              .then(() => {
                this.orderdetail = [];
                this.listParams.pageNum = 1;
                this.listParams.pageSize = 10;
                this.searchList();
              });
          });
      } else if (this.radio === "1") {
        // alert(localStorage.getItem('openId'));
        //微信提现
        this.showView = false;
        window.open(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbe777fa292e776e0&redirect_uri=http://xb.shengshidalian.com/oilCardMobile/index/wxstate?openId=${test1}&ap=${sessionParams}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`);
      }
    },
    onRefresh() {
      this.finished = false;
      this.orderdetail = [];
      this.listParams.pageNum = 1;
      this.searchList();
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        // this.count++;
      }, 1000);
    },
    onLoad() {
      if (this.orderdetail.length < this.total) {
        // 异步更新数据
        setTimeout(() => {
          ++this.listParams.pageNum;
          getList(this.listParams).then(res => {
            if (res.status === 200) {
              if (res.data.data.length > 0) {
                for (let i = 0; i < res.data.data.length; i++) {
                  this.orderdetail.push(res.data.data[i]);
                }
              }
              // 加载状态结束
              this.loading = false;
            }
          });
        }, 1000);

      }else{
        this.loading = false;
        this.finished = true;
      }

    }
  }
};
</script>
<style lang="less" scoped>
.body {
  .main {
    padding: 12px;-webkit-overflow-scrolling: touch;
    .bg-nummNum {
      width: 100%;
      height: 380px;
      background: url(../../assets/img/null_bg_qy.jpg) no-repeat center center;
      background-size: 300px auto;
    }
    h3 {
      padding: 12px 0;
      span {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #888888;
        font-weight: normal;
        margin-left: 20px;
      }
      i {
        background: #49b7e0;
        height: 20px;
        width: 3px;
        display: inline-block;
        float: left;
      }
    }
    .van-cell-group {
      li {
        padding: 5px;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        label {
          width: 110px;
          display: inline-block;
        }
      }
      button {
        border: none;
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #333333;
      }
    }
  }
}
.van-panel {
  margin-bottom: 20px;
}
.van-actionsheet {
  height: auto;
}
.exchangeBt {
  background: #49b7e0;
  color: #fff;
  width: 90%;
  border: none;
  position: fixed;
  bottom: 30px;
  margin-left: 5%;
  height: 35px;
  line-height: 35px;
  border-radius: 4px;
  font-size: 16px;
}
.wx {
  padding: 10px 15px;
  span {
    font-size: 12px;
    color: #888888;
  }
  p {
    font-size: 14px;
    color: #333333;
  }
}
.blue {
  color: #49b7e0;
  span {
    color: #49b7e0 !important;
  }
  p {
    color: #49b7e0 !important;
  }
}
.van-dialog__message {
  text-align: center;
}
</style>
